<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>遗产信息平台</a-breadcrumb-item>
      <a-breadcrumb-item>自定义表格</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <a-col :span="6">
        名称：
        <a-input placeholder="请输入" v-model="query.tableName" />
      </a-col>
      <a-col :span="6">
        状态：
        <a-select v-model="query.deleted">
          <a-select-option
            :value="item.value"
            v-for="item in statusList"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="getQuery"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="4">表单列表</a-col>
      <a-col :span="18"></a-col>
      <a-col :span="2">
        <a-button
          type="primary"
          @click="goRoute('/yichan/CreateTable')"
          v-hasPermi="['yichan:zdybg:add']"
        >
          新建
        </a-button>
      </a-col>
      <a-col :span="24">
        <a-spin :spinning="tableLoading">
          <a-table
            :columns="columns"
            :data-source="data"
            :rowKey="
              (record, index) => {
                return index;
              }
            "
            :pagination="false"
          >
            <span slot="type" slot-scope="text, record">
              {{ statusList.find((item) => item.value == String(text)).label }}
            </span>
            <span slot="action" slot-scope="text, record">
              <a @click="changeTable(record)" v-hasPermi="['yichan:zdybg:edit']"
                >编辑</a
              >
              <a-divider type="vertical" />

              <a-popconfirm
                placement="left"
                title="您正在进行删除操作，删除后数据不可恢复，确定删除吗？"
                ok-text="确认"
                cancel-text="取消"
                class="red"
                @confirm="deleteTable(record)"
                v-hasPermi="['yichan:zdybg:del']"
              >
                <a>删除</a> </a-popconfirm
              >&nbsp;
            </span>
          </a-table>
        </a-spin>
        <a-locale-provider :locale="$zhCN">
          <a-pagination
            style="float: right; margin-top: 10px"
            v-model="query.current"
            show-size-changer
            :total="total"
            :page-size-options="pageSizeOptions"
            :page-size="query.pageSize"
            @change="pageChange"
            @showSizeChange="pageSizeChange"
            :show-total="(total) => `共 ${total} 条`"
          />
        </a-locale-provider>
      </a-col>
    </a-row>
  </div>
</template>
<script>
const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: "表单名称",
    dataIndex: "tableName",
    key: "tableName",
  },
  {
    title: "状态",
    dataIndex: "deleted",
    key: "deleted",
    scopedSlots: { customRender: "type" },
  },
  {
    title: "关联档案数量",
    dataIndex: "deleted",
    key: "deleted",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
export default {
  mounted() {
    this.getList();
  },
  data() {
    return {
      button: [],
      tableLoading: false,
      statusList: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: "1",
          label: "停用",
        },
      ],
      data: [],
      columns,
      vis: false,
      pageSizeOptions: ["10", "20", "50"],
      total: 0,
      query: {
        current: 1,
        pageSize: 20,
        name: "",
        status: "",
      },
      oldData: {},
      file: null,
      oldtime: "",
    };
  },

  methods: {
    getQuery() {
      this.query.offset = 1;
      this.getList();
    },
    cleanQuery() {
      this.query = {
        current: 1,
        pageSize: 20,
        tableName: "",
        deleted: "",
      };
      this.getList();
    },
    getList() {
      var q = "/government-platform-center/userDefinedTable";
      for (const prop in this.query) {
        if (this.query[prop] != "") {
          if (prop == "current") {
            q = q + "?offset=" + this.query[prop];
          } else if (prop == "pageSize") {
            q = q + "&current=" + this.query[prop];
          } else {
            q = q + "&" + prop + "=" + this.query[prop];
          }
        }
      }
      this.tableLoading = true;
      this.$axios
        .get(q)
        .then((res) => {
          if (res.data.msg == "success") {
            this.data = res.data.data;
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    pageChange(current) {
      this.query.current = current;
      this.getList();
    },
    pageSizeChange(current, pageSize) {
      this.query.pageSize = pageSize;
      this.query.current = current;
      this.getList();
    },
    addData() {
      this.vis = true;
    },
    changeTable(record) {
      this.$router.push({
        path: "/yichan/ChangeTable",
        query: {
          id: record.id,
        },
      });
    },
    createTime1(date, dateString) {
      this.query.entryTime = dateString;
    },
    deleteTable(record) {
      var parmas = {
        id: record.id,
      };
      this.$axios
        .post(
          "/government-platform-center/userDefinedTable/deleteById",
          parmas,
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          }
        )
        .then((res) => {
          if (res.data.msg == "success") {
            this.$message.success("删除成功");
            this.getList();
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    goRoute(e) {
      this.$router.push(e).catch(() => {});
    },
  },
};
</script>
<style scoped>
.app {
  width: 100%;
  background: #f8f8f8;
  padding: 30px;
  box-sizing: border-box;
  overflow-y: scroll;
}

.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/.ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/.ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

.file-upload-btn {
  background-color: #007bff;
  /* 背景颜色 */
  color: white;
  /* 文本颜色 */
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}
</style>
